<template>
  <div class="departments">
    <el-card>
      <template #header>
        <div>组织架构</div>
      </template>
      <div style="width: 90%; margin: 0 auto">
        <TreeItem :item="topInfo" style="width: 100%" @getData="getData" />
        <hr>
        <!-- el-tree中 data为整个数据 props为显示的子项数据,为对象 对象中label与children为必须项-->
        <el-tree
          :data="treeData"
          :props="{ label: 'name', children: 'children' }"
        >
          <template v-slot="{ data }">
            <TreeItem :item="data" style="width: 100%" @getData="getData" />
          </template>
        </el-tree>
      </div>
    </el-card>

    <!-- 新增弹框组件 -->
    <!-- 将原始数据 传递给弹框组件 -->
    <Add :init-tree-data="initTreeData" @getData="getData" />
  </div>
</template>

<script>
// 抽离相同部分 如果只在当前组件重复使用则直接在组件下创建components.如果全局使用,则在components中
// 导入 弹框部分
import Add from './components/add.vue'
import TreeItem from './components/treeItem.vue'
import { companyDepartment } from '@/api/departments'
export default {
  name: '',
  components: {
    TreeItem,
    Add
  },
  data() {
    return {
      // 处理后的树状结构数组
      treeData: [],
      // 原始的树状数据
      initTreeData: [],
      // 处理头部传值
      topInfo: {
        name: '传智',
        manager: '负责人',
        // 顶部数据显示
        top: true,
        // 头部的id为'' 因为下面总裁办的id为'' 存储id
        id: ''
      }
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      // 调用接口请求
      const res = await companyDepartment()
      // 头部公司名
      this.topInfo.name = res.data.companyName
      // 存储原始树状数据
      this.initTreeData = res.data.depts
      console.log(this.initTreeData, '原始树状数据')
      // 存储处理后的树状数据
      this.treeData = this.changeDate(res.data.depts, '')
      console.log('组织架构', res)
    },
    // 封装 处理树形结构方法  str = ''默认值为''
    changeDate(arr, str = '') {
      // 第一层处理str为空的
      return arr.filter((item) => {
        if (item.pid === str) {
          // 第二层处理数组中的子项
          item.children = this.changeDate(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 15px;
}
</style>
